<template>
  <div class="flot-menu-ex" @mousedown.stop="stop" :class="{ 'flot-menu-cut': props.isCut }">
    <div class="flot-menu-ex-content">
      <t-tooltip content="编辑素材">
        <div class="flot-menu-ex-item" @click="editInfo">
          <i class="freeIcon">&#xe65d;</i>
        </div>
      </t-tooltip>
      <div class="solid-item"></div>
      <t-tooltip content="删除素材">
        <div class="flot-menu-ex-item" @click="delItem">
          <i class="freeIcon">&#xe634;</i>
        </div>
      </t-tooltip>
      <div class="solid-item" v-if="props.isCut"></div>
      <t-tooltip content="智能抠图" v-if="props.isCut">
        <t-loading size="small" :loading="loading">
          <div class="flot-menu-ex-item item-blue" @click.stop="cutImg">
            <i class="freeIcon">&#xe657;</i>
          </div>
        </t-loading>
      </t-tooltip>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import _, { drop } from 'lodash';
import { exhibitmatting, MattingType } from '@/api/exhibit/exhibit';
import { ref } from 'vue';
import { getEditExhibitId, getEditExhibitType } from '@/hooks/menuHooks';
import { useProjectStore, useUserStore } from '@/store';
import { MessagePlugin } from 'tdesign-vue-next';

const userStore = useUserStore();
const store = useProjectStore();
const loading = ref(false);
const emit = defineEmits(['emitLoadingShow']);
const props = defineProps({
  selectInfoType: {
    type: Number,
  },
  isCut: {
    type: Boolean,
  },
  childId: {
    type: Number,
  },
  indexs: {
    type: Number,
  },
  contextmenuExhibitId: {
    type: Number,
  },
  materialType: {
    type: Number,
  },
  AuxiliaryId: {
    type: Number,
  },
  itemId: {
    type: Number,
  },
});
const menuItemDom = ref();

const stop = (event) => {
  event.stopPropagation();
};

const editInfo = () => {
  //更换素材弹框
  store.contextmenuchildId = props.childId;
  store.contextmenuGroupId = props.indexs;
  store.contextmenuExhibitId = props.contextmenuExhibitId;
  store.materialType = props.materialType;
  store.selectAuxiliaryIndex = props.AuxiliaryId;
  let lock = getEditExhibitType(props.AuxiliaryId);

  if (lock) {
    getEditExhibitId(props.AuxiliaryId);
    store.setaddExbitionShow(true);
  } else {
    MessagePlugin.error('当前展品无法编辑');
  }
};
const delItem = () => {
  //移除当前展品
  store.contextmenuchildId = props.childId;
  store.contextmenuGroupId = props.indexs;
  store.contextmenuExhibitId = props.contextmenuExhibitId;
  store.materialType = props.materialType;
  store.selectAuxiliaryIndex = props.AuxiliaryId;
  store.delExbitShow = true;
  // store.removeExhibitsGroup(props.AuxiliaryId);
};

const cutImg = () => {
  if (loading.value) {
    return;
  }
  if (store.isActivitys) {
  } else {
    if (userStore.VipLevel === 0) {
      MessagePlugin.warning('当前会员等级不可使用，请升级会员等级');
      return;
    }
  }

  store.contextmenuchildId = props.childId;
  store.contextmenuGroupId = props.indexs;
  store.contextmenuExhibitId = props.contextmenuExhibitId;
  store.materialType = props.materialType;
  store.selectAuxiliaryIndex = props.AuxiliaryId;
  let id: number = 0;
  loading.value = true;
  MessagePlugin.success('正在执行智能抠图请稍后');
  emit('emitLoadingShow', loading.value);
  let parmas = {
    contextmenuchildId: props.childId,
    contextmenuGroupId: props.indexs,
    contextmenuExhibitId: props.contextmenuExhibitId,
    selectAuxiliaryIndex: props.AuxiliaryId,
    data: props.itemId,
  };
  exhibitmatting(parmas).then((res) => {
    loading.value = false;
    emit('emitLoadingShow', loading.value);
    if (res.succeeded) {
      // exhibitmatting

      setCutcover(res.data);
      MessagePlugin.success('智能抠图已完成');
    }
  });
};
const setCutcover = (data: MattingType) => {
  let clonedObject = _.cloneDeep(store.templateMOdeList);
  clonedObject.forEach((element) => {
    if (element.id == props.childId) {
      if (props.AuxiliaryId !== -1) {
        element.auxiliaryList[props.AuxiliaryId].showpieceList[props.indexs].showpieceList[
          props.contextmenuExhibitId
        ].mattingUrl = data.data;
      } else {
        element.showpieceList[props.indexs].showpieceList[props.contextmenuExhibitId].mattingUrl = data.data;
      }
    }
    element.children.forEach((el) => {
      if (el.id == props.childId) {
        if (props.AuxiliaryId !== -1) {
          el.auxiliaryList[props.AuxiliaryId].showpieceList[props.indexs].showpieceList[
            props.contextmenuExhibitId
          ].mattingUrl = data.data;
        } else {
          el.showpieceList[props.indexs].showpieceList[props.contextmenuExhibitId].mattingUrl = data.data;
        }
      }
      el.children.forEach((arr) => {
        if (arr.id == props.childId) {
          if (props.AuxiliaryId !== -1) {
            arr.auxiliaryList[props.AuxiliaryId].showpieceList[props.indexs].showpieceList[
              props.contextmenuExhibitId
            ].mattingUrl = data.data;
          } else {
            arr.showpieceList[props.indexs].showpieceList[props.contextmenuExhibitId].mattingUrl = data.data;
          }
        }
      });
    });
  });
  store.templateMOdeList = clonedObject;
};
</script> 

<style scoped lang="less">
.flot-menu-ex {
  display: none;
  // display: flex;
  position: absolute;
  justify-content: space-around;
  align-items: center;
  top: -52px;
  left: 50%;
  width: 80px;
  height: 40px;
  background: #ffffff;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1), 0px 8px 10px 1px rgba(0, 0, 0, 0.06),
    0px 3px 14px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  transform: translate(-50%, -0%);
  padding: 4px;
  z-index: 777;
}
.flot-menu-cut {
  width: 120px;
}
.flot-menu-ex-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 100%;
  border-radius: 4px;
  .freeIcon {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.59);
  }
  .doorIcon {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.59);
  }
}
.flot-menu-ex-item:hover {
  background: #f5f5f5;
}
.flot-menu-ex-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
.adjust-menu {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 120px;
  top: 28px;
  width: 240px;
  height: auto;
  padding: 12px;
  background: #fff;
  border-radius: 4px;
}
.adjust-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  span {
    color: #000;
    font-size: 14px;
    margin-right: 16px;
  }
}
.silid-box {
  flex: 1;
}
:deep(.t-slider__button) {
  width: 12px;
  height: 12px;
}
.item-blue {
  .freeIcon,
  .doorIcon {
    background: linear-gradient(326deg, #892eff 0%, #3c90f0 56%, #00dce5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.solid-item {
  width: 1px;
  height: 12px;
  box-shadow: inset -1px 0px 0px 0px #f0f0f0;
  margin: 0 4px;
}
</style>